<template>
    <div style="display: none">
        <slot v-if="ready" />
    </div>
</template>

<script>
import { optionsMerger, propsBinder, findRealParent } from "../../utils";
import SplineMixin from "../../mixins/Spline.js";
import Options from "../../mixins/Options.js";
import { DomEvent } from "leaflet";
import { swoopyArrow } from "./SwoopyArrow.js";

/**
 * Easily draw a polyline on the map
 */
export default {
    name: "LSpline",
    mixins: [SplineMixin, Options],
    props: {
        latLngs: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            ready: false,
        };
    },
    mounted() {
        const options = optionsMerger(this.splineOptions, this);
        // this.mapObject = swoopyArrow(this.latLngs, options);
        this.mapObject = swoopyArrow([53.52, 13.4], [53.525, 14.41], {
            label: "Hi!",
            labelFontSize: 12,
            iconAnchor: [20, 10],
            iconSize: [20, 16],
        });
        DomEvent.on(this.mapObject, this.$listeners);
        propsBinder(this, this.mapObject, this.$options.props);
        this.ready = true;
        this.parentContainer = findRealParent(this.$parent);
        this.parentContainer.addLayer(this, !this.visible);
        this.$nextTick(() => {
            /**
             * Triggers when the component is ready
             * @type {object}
             * @property {object} mapObject - reference to leaflet map object
             */
            this.$emit("ready", this.mapObject);
        });
    },
};
</script>
